<template>
  <div class="header">
    <div class="mask" v-if="flag">
      <div class="triangle"></div>
      <div class="tip">
        <ul class="citys">
          <li
            v-on:click="myTab2(0)"
            :class="['city', num2 == 0 ? 'active1' : '']"
          >
            全国站
          </li>
          <li
            v-on:click="myTab2(1)"
            :class="['city', num2 == 1 ? 'active1' : '']"
          >
            北京站
          </li>
          <li
            v-on:click="myTab2(2)"
            :class="['city', num2 == 2 ? 'active1' : '']"
          >
            上海站
          </li>
          <li
            v-on:click="myTab2(3)"
            :class="['city', num2 == 3 ? 'active1' : '']"
          >
            广州站
          </li>
          <li
            v-on:click="myTab2(4)"
            :class="['city', num2 == 4 ? 'active1' : '']"
          >
            深圳站
          </li>
          <li
            v-on:click="myTab2(5)"
            :class="['city', num2 == 5 ? 'active1' : '']"
          >
            杭州站
          </li>
          <li
            v-on:click="myTab2(6)"
            :class="['city', num2 == 6 ? 'active1' : '']"
          >
            天津站
          </li>
          <li
            v-on:click="myTab2(7)"
            :class="['city', num2 == 7 ? 'active1' : '']"
          >
            西安站
          </li>
          <li
            v-on:click="myTab2(8)"
            :class="['city', num2 == 8 ? 'active1' : '']"
          >
            苏州站
          </li>
          <li
            v-on:click="myTab2(9)"
            :class="['city', num2 == 9 ? 'active1' : '']"
          >
            武汉站
          </li>
          <li
            v-on:click="myTab2(10)"
            :class="['city', num2 == 10 ? 'active1' : '']"
          >
            厦门站
          </li>
          <li
            v-on:click="myTab2(11)"
            :class="['city', num2 == 11 ? 'active1' : '']"
          >
            长沙站
          </li>
          <li
            v-on:click="myTab2(12)"
            :class="['city', num2 == 12 ? 'active1' : '']"
          >
            成都站
          </li>
          <li
            v-on:click="myTab2(13)"
            :class="['city', num2 == 13 ? 'active1' : '']"
          >
            郑州站
          </li>
          <li
            v-on:click="myTab2(14)"
            :class="['city', num2 == 14 ? 'active1' : '']"
          >
            重庆站
          </li>
          <li
            v-on:click="myTab2(15)"
            :class="['city', num2 == 15 ? 'active1' : '']"
          >
            合肥站
          </li>
          <li
            v-on:click="myTab2(16)"
            :class="['city', num2 == 16 ? 'active1' : '']"
          >
            济南站
          </li>
          <li
            v-on:click="myTab2(17)"
            :class="['city', num2 == 17 ? 'active1' : '']"
          >
            青岛站
          </li>
          <li
            v-on:click="myTab2(18)"
            :class="['city', num2 == 18 ? 'active1' : '']"
          >
            南京站
          </li>
          <li
            v-on:click="myTab2(19)"
            :class="['city', num2 == 19 ? 'active1' : '']"
          >
            东莞站
          </li>
          <li
            v-on:click="myTab2(20)"
            :class="['city', num2 == 20 ? 'active1' : '']"
          >
            昆明站
          </li>
          <li
            v-on:click="myTab2(21)"
            :class="['city', num2 == 21 ? 'active1' : '']"
          >
            南昌站
          </li>
          <li
            v-on:click="myTab2(22)"
            :class="['city', num2 == 22 ? 'active1' : '']"
          >
            石家庄站
          </li>
          <li
            v-on:click="myTab2(23)"
            :class="['city', num2 == 23 ? 'active1' : '']"
          >
            宁波站
          </li>
          <li
            v-on:click="myTab2(24)"
            :class="['city', num2 == 24 ? 'active1' : '']"
          >
            福州站
          </li>
        </ul>
      </div>
    </div>
    <!-- 导航条 -->
    <div class="logo">
      <div class="img">
        <img src="../assets/logo2.png" alt="" />
        <div class="position" @click="myClick">
          <img src="../assets/position.png" alt="" />
          <div class="city1">[切换城市]</div>
        </div>
        <div class="tabbar">
          <div class="box">
            <div class="title">
              <div
                :class="['content', num == 0 ? 'active' : '']"
                @click="myTab(0)"
              >
                首页
              </div>
            </div>
            <div class="title">
              <div
                :class="['content', num == 1 ? 'active' : '']"
                @click="myTab(1)"
              >
                数据Boss
              </div>
            </div>
            <div class="title">
              <div
                :class="['content', num == 2 ? 'active' : '']"
                @click="myTab(2)"
              >
                全程建咨询
              </div>
            </div>
            <div class="title">
              <div
                :class="['content', num == 3 ? 'active' : '']"
                @click="myTab(3)"
              >
                数据组合体验
              </div>
            </div>
            <div class="title">
              <div
                :class="['content', num == 4 ? 'active' : '']"
                @click="myTab(4)"
              >
                数据与维护
              </div>
            </div>
            <div class="title">
              <div class="content">
                <router-link to="Login" class="login"> 登录/注册 </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="box3" v-if="this.num == 0">
        <shouye></shouye>
      </div>
      <div class="box3" v-if="this.num == 1">
        <databoss></databoss>
      </div>
      <div class="box3" v-if="this.num == 2">
        <ask></ask>
      </div>
      <div class="box3" v-if="this.num == 3">
        <experience></experience>
      </div>
      <div class="box3" v-if="this.num == 4">
        <maintain></maintain>
      </div>
    </div>
  </div>
</template>


<script>
import Ask from "../components/Ask.vue";
import Databoss from "../components/Databoss.vue";
import Experience from "../components/Experience.vue";
import Maintain from "../components/Maintain.vue";
import Shouye from "../components/Shouye.vue";
export default {
  components: { Databoss, Ask, Experience, Maintain, Shouye },
  name: "Firstpage",
  data() {
    return {
      activeName: "shouye",
      num: 0,
      num2: 0,
      flag: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(event);
    },
    myTab(v1) {
      this.num = v1;
    },
    myClick() {
      this.flag = !this.flag;
    },
    myTab2(v2) {
      this.num2 = v2;
    },
  },
};
</script>


<style lang="less" scoped>
.header {
  position: relative;
  .mask {
    width: 100%;
    height: 700px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .triangle {
      width: 0;
      height: 0;
      border: 20px solid;
      border-color: transparent transparent #fff;
      position: absolute;
      left: 235px;
      top: 10px;
    }
    .tip {
      position: absolute;
      left: 230px;
      top: 49px;
      height: 300px;
      width: 500px;
      height: 300px;
      background-color: #fff;
      text-align: center;
      border-radius: 10px;
      .citys {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        .city {
          width: 90px;
          height: 50px;
          line-height: 50px;
          border-radius: 10px;
          user-select: none;
          cursor: pointer;
          margin-left: 10px;
          // margin-right: 10px;
          // font-size: 18px;
        }
        .active1 {
          background-color: #2c2b82;
          color: #fff;
        }
      }
    }
    .close {
      position: absolute;
      left: 930px;
      top: 159px;
      height: 100px;
    }
  }
  .logo {
    width: 100%;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    color: #fff;
    .img {
      display: flex;
      position: relative;
      margin-left: 50px;
      img {
        width: 100px;
        height: 50px;
        background-color: transparent;
      }
      .position {
        width: 200px;
        display: flex;
        height: 50px;
        line-height: 50px;
        margin-left: 100px;
        img {
          width: 30px;
          height: 30px;
          margin-top: 10px;
        }
        .city1 {
          margin-top: 0px;
          user-select: none;
        }
      }
    }
    .tabbar {
      width: 100%;
      display: flex;
      .box {
        line-height: 50px;
        display: flex;
        .title {
          user-select: none;
          .content {
            margin-left: 70px;
            .login {
              color: white;
            }
          }
        }
      }
    }
    .box2 {
    }
  }
}
</style>